<template>
    <div>
        医生名称 <el-input v-model="formData.name" style="width: 200px;" placeholder="Please input" />
        医生科室 <el-input v-model="formData.administrative" style="width: 200px;" placeholder="Please input" />
        <el-button type="primary" @click="submit">查询</el-button>

        <ElTable :data="state.list">
            <ElTableColumn prop="name" label="医生姓名"></ElTableColumn>
            <ElTableColumn prop="department" label="所属科室"></ElTableColumn>
            <ElTableColumn label="商品图片">
                <template v-slot:default="slotProps">
                    <img :src="slotProps.row.head" alt="">
                </template>

            </ElTableColumn>
            <ElTableColumn prop="phone" label="联系方式"></ElTableColumn>
            <ElTableColumn prop="sex" label="性别"></ElTableColumn>
        </ElTable>


        <el-pagination v-model:page-size="pageInfo.pageSize" v-model:current-page="pageInfo.currentPage"
            layout="prev, pager, next, sizes" :page-sizes="[5, 8, 10, 15]" :total="state.total" />


    </div>
</template>

<script setup lang="ts">
import { doctorlistdoctor, doctorsearchdoctor } from '../../api/doctor.api'
import { reactive, watchEffect, ref } from 'vue';
import { IDoctor } from '../../type/doctor.type'
const BASE_URL = import.meta.env.VITE_IMG_URL
const pageInfo = reactive({
    currentPage: 1,
    pageSize: 5,
})

const formData = reactive({
    name: '',
    administrative: ""
})

//查找
const submit = () => {
    const { name, administrative } = formData
    console.log(name, administrative);

    doctorsearchdoctor(pageInfo.currentPage, pageInfo.pageSize).then(res => {
        console.log(res.data.data);
        if (res.data.data.length > 0) {
            state.total = res.data.total!
            state.list = res.data.data
        }
    })
}


type State = {
    list: IDoctor[],
    total: number
}

const state = reactive<State>({
    list: [],
    total: 0
})

const getUsers = () => {
    doctorlistdoctor(pageInfo.currentPage, pageInfo.pageSize).then(res => {
        console.log(res.data.data);
        if (res.data.data.length > 0) {
            state.total = res.data.total!
            state.list = res.data.data
        }
    })
}

// 用户查询接口 
watchEffect(getUsers)


</script>

<style scoped>
img {
    width: 50px;
    height: 50px;
}
</style>